<!DOCTYPE html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>My Orders - Shoplook Multipurpose eCommerce Bootstrap5 Html Template</title>
    <meta name="description" content="description">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Favicon -->
    <link rel="shortcut icon" th:href="@{/assets/images/favicon.png}"/>
    <!-- Plugins CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/plugins.css}">
    <!-- Main Style CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/style.css}">
    <link rel="stylesheet" th:href="@{/assets/css/responsive.css}">
    
    <style>
        .order-item {
            border: 1px solid #ddd;
            border-radius: 8px;
            margin-bottom: 20px;
            padding: 20px;
        }
        .order-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        .order-status {
            padding: 5px 15px;
            border-radius: 20px;
            color: white;
            font-size: 12px;
        }
        .status-pending { background-color: #ffc107; }
        .status-paid { background-color: #28a745; }
        .status-shipped { background-color: #17a2b8; }
        .status-delivered { background-color: #007bff; }
        .status-cancelled { background-color: #dc3545; }
        .order-item-list {
            margin: 10px 0;
        }
        .order-item-product {
            display: flex;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #f5f5f5;
        }
        .order-item-product:last-child {
            border-bottom: none;
        }
        .product-image {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 4px;
            margin-right: 15px;
        }
        .product-info {
            flex: 1;
        }
        .product-name {
            font-weight: 600;
            margin-bottom: 5px;
        }
        .product-price {
            color: #e74c3c;
            font-weight: 600;
        }
        .order-actions {
            margin-top: 15px;
            text-align: right;
        }
        .btn-sm {
            padding: 5px 15px;
            font-size: 12px;
        }
    </style>
</head>
<body class="my-orders-page">
<!--Pre-Loader-->
<div id="pre-loader" class="preloader">
    <div class="preloader-in h2">
        <span>S</span><span>H</span><span>O</span><span>P</span><span>L</span><span>O</span><span>O</span><span>K</span>
    </div>
</div>
<!--End Pre-Loader-->
<div class="page-wrapper">
    <!--引入片段-->
    <div th:replace="~{include_header::header}"></div>

    <div id="page-content">
        <!--Body Container-->
        <!--Page Header-->
        <div class="page-header" th:style="|background-image: url(@{/assets/images/page-header/page-banner1.jpg})|">
            <div class="page-title"><h1>My Orders</h1></div>
            <!--Breadcrumbs-->
            <div class="breadcrumbs-wrapper">
                <div class="container">
                    <div class="breadcrumbs">
                        <a th:href="@{/}" title="Back to the home page">
                            <i class="an an-home icon-home"></i>
                        </a> 
                        <span aria-hidden="true"><i class="an an-angle-right"></i></span>
                        <a th:href="@{/my-account}">My Account</a>
                        <span aria-hidden="true"><i class="an an-angle-right"></i></span>
                        <span>My Orders</span>
                    </div>
                </div>
            </div>
            <!--End Breadcrumbs-->
        </div>
        <!--End Page Header-->
        
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="dashboard-upper-info mb-4">
                        <div class="d-flex justify-content-between align-items-center">
                            <h3>My Orders</h3>
                            <div>
                                <select class="form-select" id="order-status-filter">
                                    <option value="">All Orders</option>
                                    <option value="PENDING">Pending</option>
                                    <option value="PAID">Paid</option>
                                    <option value="SHIPPED">Shipped</option>
                                    <option value="DELIVERED">Delivered</option>
                                    <option value="CANCELLED">Cancelled</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 订单列表 -->
                    <div class="orders-list">
                        <!-- 如果没有订单 -->
                        <div th:if="${#lists.isEmpty(orders)}" class="text-center py-5">
                            <i class="an an-bag-l" style="font-size: 48px; color: #ccc;"></i>
                            <h4 class="mt-3">No Orders Yet</h4>
                            <p>You haven't placed any orders yet.</p>
                            <a th:href="@{/goods}" class="btn btn-primary">Start Shopping</a>
                        </div>
                        
                        <!-- 订单项 -->
                        <div th:each="order : ${orders}" class="order-item">
                            <div class="order-header">
                                <div>
                                    <h5>Order #<span th:text="${order.id}">123456</span></h5>
                                    <small class="text-muted" th:text="${#temporals.format(order.createTime, 'yyyy-MM-dd HH:mm')}">2023-12-01 14:30</small>
                                </div>
                                <div>
                                    <span class="order-status" 
                                          th:class="|order-status status-${#strings.toLowerCase(order.status)}|"
                                          th:text="${order.status}">PENDING</span>
                                </div>
                            </div>
                            
                            <!-- 订单商品列表 -->
                            <div class="order-item-list">
                                <div th:each="item : ${order.orderItems}" class="order-item-product">
                                    <img th:src="@{${item.goodPic ?: '/assets/images/product-images/default.jpg'}}" 
                                         class="product-image" alt="Product Image">
                                    <div class="product-info">
                                        <div class="product-name" th:text="${item.goodName}">Product Name</div>
                                        <div class="text-muted">
                                            Qty: <span th:text="${item.count}">1</span>
                                        </div>
                                    </div>
                                    <div class="product-price" th:text="|¥${item.dealPrice}|">¥99.00</div>
                                </div>
                            </div>
                            
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <strong>Total: <span class="product-price" th:text="|¥${order.totalPay}|">¥299.00</span></strong>
                                </div>
                                <div class="order-actions">
                                    <a th:href="@{/order/detail/{id}(id=${order.id})}" class="btn btn-outline-primary btn-sm">View Details</a>
                                    <button th:if="${order.status == 'PENDING'}" 
                                            th:onclick="|payOrder(${order.id})|"
                                            class="btn btn-primary btn-sm">Pay Now</button>
                                    <button th:if="${order.status == 'PAID'}" 
                                            th:onclick="|confirmDelivery(${order.id})|"
                                            class="btn btn-success btn-sm">Confirm Receipt</button>
                                    <button th:if="${order.status == 'PENDING'}" 
                                            th:onclick="|cancelOrder(${order.id})|"
                                            class="btn btn-outline-danger btn-sm">Cancel</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 分页 -->
                    <div th:if="${totalPages > 1}" class="pagination-wrapper text-center mt-4">
                        <nav aria-label="Page navigation">
                            <ul class="pagination justify-content-center">
                                <li th:class="|page-item ${currentPage == 1 ? 'disabled' : ''}|">
                                    <a class="page-link" th:href="@{/my-orders(page=${currentPage - 1}, status=${currentStatus})}">Previous</a>
                                </li>
                                <li th:each="pageNum : ${#numbers.sequence(1, totalPages)}" 
                                    th:class="|page-item ${pageNum == currentPage ? 'active' : ''}|">
                                    <a class="page-link" th:href="@{/my-orders(page=${pageNum}, status=${currentStatus})}" th:text="${pageNum}">1</a>
                                </li>
                                <li th:class="|page-item ${currentPage == totalPages ? 'disabled' : ''}|">
                                    <a class="page-link" th:href="@{/my-orders(page=${currentPage + 1}, status=${currentStatus})}">Next</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--Footer-->
    <div th:replace="~{include_header::footer}"></div>
    <!--End Footer-->
</div>

<!--Plugins JS-->
<script th:src="@{/assets/js/plugins.js}"></script>
<!--Main JS-->
<script th:src="@{/assets/js/main.js}"></script>

<script>
// 支付订单
function payOrder(orderId) {
    if (confirm('确认支付此订单？')) {
        fetch('/order/pay', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: 'orderId=' + orderId + '&paymentMethod=alipay'
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('支付成功！');
                location.reload();
            } else {
                alert('支付失败：' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('支付失败');
        });
    }
}

// 取消订单
function cancelOrder(orderId) {
    if (confirm('确认取消此订单？')) {
        fetch('/order/cancel', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: 'orderId=' + orderId
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('订单已取消！');
                location.reload();
            } else {
                alert('取消失败：' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('取消失败');
        });
    }
}

// 确认收货
function confirmDelivery(orderId) {
    if (confirm('确认收货？')) {
        fetch('/order/confirm', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: 'orderId=' + orderId
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('确认收货成功！');
                location.reload();
            } else {
                alert('操作失败：' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('操作失败');
        });
    }
}

// 订单状态筛选
document.getElementById('order-status-filter').addEventListener('change', function() {
    const status = this.value;
    const url = new URL(window.location);
    if (status) {
        url.searchParams.set('status', status);
    } else {
        url.searchParams.delete('status');
    }
    url.searchParams.set('page', '1');
    window.location = url;
});
</script>
</body>
</html> 